
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import cs from 'classnames';
import sty from './sty.module.css';
import { Link } from 'react-router-dom';
const ThemeHeaderRcm = (props) => {
  const { showIcon, title, keywordsClick, keywords, right } = props;
  return <div className={cs(sty.wrap, { 'hasMoreIcon': showIcon })}>
    <div className='flex1'>
      <h2 className={sty.hotTitle}>
        <Link to='/' onClick={e => { e.preventDefault() }} className='no-link hot-text'>        {title} </Link>
      </h2>
      <ul className={sty.keywords}>
        {
          keywords.map((v) => <li key={v}>
            <Link to='/' onClick={e => { e.preventDefault(); keywordsClick(v) }} >{v} </Link>
            <span className={sty.line}>|</span>
          </li>)
        }
      </ul>
    </div>
    <div className={cs(sty.right, 'flex2')}>
      <div  >{right}</div>
      {showIcon && <i className='moreIcon'></i>}
    </div>
  </div>
}

ThemeHeaderRcm.propTypes = {
  title: PropTypes.string,
  keywords: PropTypes.array,
  keywordsClick: PropTypes.func,
  showIcon: PropTypes.bool,
  right: PropTypes.any
}
ThemeHeaderRcm.defaultProps = {
  title: '',
  keywordsClick: () => { },
  keywords: [],
  right: '更多',
  showIcon: true
}
export default memo(ThemeHeaderRcm)